Use a design system library in Figma 在 Figma 中使用設計系統庫

學習製作 system library

https://help.figma.com/hc/en-us/articles/360056440594-Create-and-use-variants

https://www.figma.com/best-practices/components-styles-and-shared-libraries/

https://medium.com/design-with-figma/10-tips-on-using-components-in-figma-c7db9c5e7fe1

Figma 使用 Android Design 系統

https://www.figma.com/@androiddesign

使用現有設計系統的意義

加速產品開發

設計系統能加快開發進度，幫助快速達到專業級別的設計一致性。

來源型別

• 企業內部自建系統

• 公共系統：Google（Material）、Apple（HIG）、Microsoft（Fluent）

融合方式

• 直接使用：匯入現成元件，調整品牌樣式

• 混合使用：自有元素與系統元件組合

Material Design 實踐操作

瞭解主題

• Typography：選擇符合品牌的字型

• Color：使用或調整配色方案

• Elevation：設定元素視覺深度

• States：元件狀態變化

構建介面

建立框架：用 Frame 工具建立手機介面

新增頂部導航欄：複製 App Bar 並對齊至頂部

新增底部導航欄

• 拖入 Bottom Nav 元件並對齊底部

• 使用 Detach Instance 斷開主元件

• 替換圖示和文字
  • "Search" → "Home"
  • "Info" → "Calendar"

• 設定一致的顏色樣式

新增浮動按鈕

選擇 FAB 型別

• 使用 Extended FAB 元件

• 修改文字為"Schedule"

• 調整按鈕寬度

設定位置：放置在距底部 96px 處

最佳化建議

補充介面元素

• 新增 Logo、圖片、列表等

• 替換為品牌專屬樣式

探索 Material Kit

• Sticker Sheet：查詢常用元件

• Components：搜尋具體元素

• 學習 Google 設計指南

核心總結

• 設計系統避免重複造輪子

• 掌握元件調整方法

• 使用 Figma 元件功能提升效率

• 選擇最適合專案的設計系統